<!DOCTYPE html>
<html>
<head lang="en">
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js">//219970242张轩珲</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>jQuery表单验证</title>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("img").hide();
            var f1;
            var f2;
            var f3;
            var f4;
            $("input:eq(0)").blur(function(){
                $("img:eq(0)").show();
                var email = $("input:eq(0)").val();
                var flag = email.indexOf("@")>-1;
                if(flag){
                    $("img:eq(0)").attr("src","img/正确.png");
                    $("span:eq(0)").text("用户名可用");
                    f1 = true;
                }else{
                    $("img:eq(0)").attr("src","错误.png");
                    $("span:eq(0)").text("用户名不可用");
                    f1 = false;
                }
            });
            $("input:eq(1)").blur(function(){
                $("img:eq(1)").show();
                var name = $("input:eq(1)").val();
                if(name.length>=4&&name.length<=20){
                    $("img:eq(1)").attr("src","img/正确.png");
                    $("span:eq(1)").text("昵称可用");
                    f2 = true;
                }else{
                    $("img:eq(1)").attr("src","img/错误.png");
                    $("span:eq(1)").text("昵称不可用");
                    f2 = false;
                }
            });
            $("input:eq(2)").blur(function(){
                $("img:eq(2)").show();
                var psw = $("input:eq(2)").val();
                if(psw.length>=6&&psw.length<=20){
                    $("img:eq(2)").attr("src","img/正确.png");
                    $("span:eq(2)").text("密码可用");
                    f3 = true;
                }else{
                    $("img:eq(2)").attr("src","img/错误.png");
                    $("span:eq(2)").text("密码不可用");
                    f3 = false;
                }
            });
            $("input:eq(3)").blur(function(){
                $("img:eq(3)").show();
                var psw1 = $("input:eq(2)").val();
                var psw2 = $("input:eq(3)").val();
                if(psw1==psw2){
                    $("img:eq(3)").attr("src","img/正确.png");
                    $("span:eq(3)").text("密码一致");
                    f4 = true;
                }else{
                    $("img:eq(3)").attr("src","img/错误.png");
                    $("span:eq(3)").text("两次密码不一致");
                    f4 = false;
                }
            });
            $("input:eq(4)").click(function(){
                if(f1&&f2&&f3&&f4){
                    alert("表单符合要求");
                }else{
                    alert("表单有误");
                }
            });
        });
    </script>
    <style type="text/css">
 
        .t1{
            background: #b3d4fc;
            text-align: right;
        }
        .t2{
            border-right: none;
        }
        .t3{
            border-left: none;
        }
        input{
            background: lightgreen;
        }
        img{
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>
    <table border="1px" cellpadding="5px" cellspacing="0" style="margin: 20px auto">
        <tr>
            <td class="t1">请填写您的Email地址：</td>
            <td class="t2">
                <input type="text">
            </td>
            <td class="t3">
                <p>请填写有效的Email地址，在下一步中您将用此邮箱接收验证邮件。</p>
                <div>
                    <img><span></span>
                </div>
            </td>
        </tr>
        <tr>
            <td class="t1">设置您在当当网的昵称：</td>
            <td class="t2">
                <input type="text">
            </td>
            <td class="t3">
                <p class="name">您的昵称可以由小写英文字母、中文、数字组成，<br>长度4-20个字符，一个汉字为两个字符</p>
                <div>
                    <img><span></span>
                </div>
            </td>
        </tr>
        <tr>
            <td class="t1">设置密码：</td>
            <td class="t2">
                <input type="password">
            </td>
            <td class="t3">
                <p>您的密码可以由大小写英文字母、数字组成，长度6-20位</p>
                <div>
                    <img><span></span>
                </div>
            </td>
        </tr>
        <tr>
            <td class="t1">再次输入您设置的密码：</td>
            <td class="t2">
                <input type="password">
            </td>
            <td class="t3">
                <div>
                    <img><span></span>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="3" class="t2" style="text-align: center">
                <input type="button" value="注册" style="background: lightgray">
            </td>
        </tr>
    </table>
</body>
</html>